<style type="text/css">
    @import "<?php echo base_url() . 'assets/thirt_party/dojo161/'; ?>dojo/resources/dnd.css";

    .dojoDndItemSelected,
    .dojoDndItemAnchor{
        background-color: #D8EDFF !important;
    }
</style>
<script type="text/javascript" src="<?php echo base_url() . 'assets/js/' ?>_testCommon.js"></script>
<script type="text/javascript">
    dojo.require("dijit.dijit"); // optimize: load dijit layer
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dijit.Tree");
    dojo.require("dijit.tree.TreeStoreModel");
		
    var testController = dojo._getVar("testController", "")=="selector"?"dijit.tree._dndSelector":"dijit.tree.dndSource";

    dijit.Tree.prototype.dndController = testController;
		
    dojo.require(testController);
    dojo.require("dijit.Menu");
    dojo.require("dijit.form.Button");

    dojo.require("dojo.dnd.common");
    dojo.require("dojo.dnd.Source");

    selected=[];

    globalId=1000;
    lastSelected=null;

    dojo.addOnLoad(function(){
        dojo.connect(myStore, "onNew", function(item, pInfo){
            var p = pInfo && pInfo.item;
            if (p) {
                var currentTotal = myStore.getValues(p, "numberOfItems")[0];
                myStore.setValue(p, "numberOfItems", ++currentTotal);
            }

        });
        dojo.connect(dijit.byId("btnAddChild"),"onClick",function(){
            var node_id = dijit.byId("nodeID").getValue();
            window.location.href = "<?php echo base_url() . 'admin/categories/add/'; ?>"+node_id;
        });
        dojo.connect(dijit.byId("btnUpdate"), "onClick",function(){
            var node_id = dijit.byId("nodeID").getValue();
            if(node_id==''){
                alert("Bạn phải chọn danh mục cần chỉnh sửa!");
                return false;
            }
            window.location.href = "<?php echo base_url() . 'admin/categories/update/'; ?>"+node_id;
        });
        dojo.connect(dijit.byId("btnDelete"), "onClick", function(){
            var node_id = dijit.byId("nodeID").getValue();
            if(node_id==''){
                alert("You must choose a node to delete!");
                return false;
            }
            if(node_id==1){
                alert("You can not delete!");
                return false;
            }
            if(!confirm('Bạn có chắc chắn muốn xóa danh mục này?')){
                return false;
            }
            var xhrArgs = {
                url:"<?php echo base_url() . 'admin/categories/delete_categories/'; ?>"+node_id,
                load:function(data){
                    window.location.href = "<?php echo site_url() . 'admin/categories/listing'; ?>";
                },
                error:function(error){
                    alert(error);
                }
            }
            var deferred = dojo.xhrPost(xhrArgs);
        });
    });

    function catTreeCustomLabel(item){
        var label = myStore.getLabel(item);
        var num = myStore.hasAttribute(item, "numberOfItems") ? myStore.getValues(item,"numberOfItems") : "?";
        return label + ' (' + num+ ')';
    }

    //on collection tree, only accept itself as the source tree
    function collectionTreeCheckItemAcceptance(node,source,position) {
        if(source.tree && source.tree.id == "collectionsTree"){
            return true;
        }
        return false;
    }

    function dndAccept(source,nodes){
        if (this.tree.id=="myTree"){
            return false;
        }
        return true;
    }

    function getIcon(item) {
        if (!item || myStore.hasAttribute(item, "numberOfItems")) {
            return "myFolder";
        }
        return "myItem"
    }
    function super_alert(message){
        //alert(message);
        dijit.byId("nodeID").attr("value", message);
    }
    
</script>
<style>
    .myFolder{
        width: 16px;
        height: 16px;
        background: blue;
    }
    .myItem{
        width: 16px;
        height: 16px;
        background: green;

    }
</style>
<div data-dojo-id="myStore" data-dojo-type="dojo.data.ItemFileWriteStore" data-dojo-props='url:"<?php echo base_url() .$this->session->userdata('shop_name'). '/admin/shop_categories/json_category_data'; ?>"'></div>
<table style="margin:5px solid gray;width:100%;" >
    <tr>
        <td>
            <button  dojoType="dijit.form.Button" id="btnAddChild">Thêm danh mục con</button>
            <button dojoType="dijit.form.Button" id="btnUpdate">Cập nhật danh mục</button>
            <button dojoType="dijit.form.Button" id="btnDelete">Xóa danh mục</button>
            <input dojoType="dijit.form.TextBox" type="hidden" value="" id="nodeID" />
        </td>
    </tr>
    <tr>
        <td>
            <div data-dojo-id="catModel" data-dojo-type="dijit.tree.TreeStoreModel" data-dojo-props='store:myStore, query:{id: "<?php echo $root_id;?>"}'></div>
            <div id="collectionsTree" data-dojo-type="dijit.Tree" data-dojo-props='"class":"container", model:catModel,
                 getLabel:catTreeCustomLabel, betweenThreshold:5,
                 checkAcceptance:dndAccept, checkItemAcceptance:collectionTreeCheckItemAcceptance, getIconClass:getIcon,
                 persist:false'>
                <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
                    super_alert(myStore.getValue(item,"id"));
                </script>
            </div>
        </td>
    </tr>

</table>